import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import StepWrapper from 'beta/containers/layout/StepWrapper';
import { IContext } from 'beta/typings/context';
import { inject, observer } from 'mobx-react';
import { useTranslation } from 'utils/i18n';

import ConfirmCancellation from './containers/ConfirmCancellation';

type UppsognProps = {
  customerId: string;
  contractId: string;
};

const COLOR = 'orange';

const Uppsogn = ({ customerId, contractId }: UppsognProps) => {
  const { t } = useTranslation(['alltSaman', 'thjonustubreyting']);

  return (
    <StepWrapper
      color={COLOR}
      returnUrl={`/beta/${customerId}/askriftir/${contractId}`}
      title={t('cancelContract.title')}
      icon="alltSaman"
      button={{
        text: t('thjonustubreyting:breytaThjonustu.sidemenuButton'),
        renderAs: 'a',
        colorScheme: 'black100',
        icon: 'phone',
        href: 'https://www.nova.is/hafa-samband/panta-simtal',
        target: '_blank',
      }}
      childrenBottom={
        <Box>
          <Text variant="pSmallRegular" color="grey500" renderAs="span">
            {t('alltSaman.infoAnd')}
          </Text>
          <Text variant="pSmallBold" color="orange" renderAs="span">
            {
              <a href={'https://www.nova.is/alltsaman/spurningar'} target="__blank">
                {t('alltSaman.questions')}
              </a>
            }
          </Text>
        </Box>
      }
    >
      <ConfirmCancellation contractId={contractId} color={COLOR} />
    </StepWrapper>
  );
};

Uppsogn.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    contractId: query.contractId,
    namespacesRequired: ['thjonustubreyting', 'alltSaman', 'steps'],
  };
};

export default inject('steps')(observer(Uppsogn));